<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :lg="24" :xs="24" class="mb-[12px]">
        <el-card style="min-width: 480px;margin-bottom: 18px;">
          <el-form
          ref="projectFormRef"
            :model="projectData"
            label-width="100px"
            disabled="true"
          >
            <div class="form-flex">
              <el-form-item label="项目名称" prop="projectName" class="form-item">
                <el-input v-model="projectData.projectName" />
              </el-form-item>
            </div>
            <div class="form-flex">
              <el-form-item label="开发部门" prop="departmentName" class="form-item">
                <el-input v-model="projectData.departmentName" />
              </el-form-item>
              <el-form-item label="项目经理" prop="projectManagerName" class="form-item">
                <el-input v-model="projectData.projectManagerName" />
              </el-form-item>
            </div>
            <div class="form-flex">
              <el-form-item label="产品经理" prop="productManagerName" class="form-item">
                <el-input v-model="projectData.productManagerName" />
              </el-form-item>
              <el-form-item label="实际启动时间" prop="beginDate" class="form-item">
                <el-input v-model="projectData.beginDate" />
              </el-form-item>
            </div>
            <div class="form-flex">
              <el-form-item label="计划结束时间" prop="planEndDate" class="form-item">
                <el-input v-model="projectData.planEndDate" />
              </el-form-item>
              <el-form-item label="实际结束时间" prop="endDate" class="form-item">
                <el-input v-model="projectData.endDate" />
              </el-form-item>
            </div>
            <div class="form-flex">
              <el-form-item label="项目类型" prop="projectTypeText" class="form-item">
                <el-input v-model="projectData.projectTypeText" />
              </el-form-item>
              <el-form-item class="form-item">
              </el-form-item>
            </div>
            <el-form-item label="项目背景" prop="projectBackground">
              <el-input v-model="projectData.projectBackground" :rows="4" type="textarea" />
            </el-form-item>
            <el-form-item label="项目目标" prop="projectTarget">
              <el-input v-model="projectData.projectTarget" :rows="4" type="textarea" />
            </el-form-item>
            <el-form-item label="项目风险" prop="projectRisk">
              <el-input v-model="projectData.projectRisk" :rows="4" type="textarea" />
            </el-form-item>
            <div class="form-flex">
              <el-form-item label="创建人" prop="nickName">
                <el-input v-model="projectData.nickName" />
              </el-form-item>
              <el-form-item label="创建时间" prop="createTime">
                <el-input v-model="projectData.createTime" />
              </el-form-item>
            </div>
            <div class="form-flex">
              <el-form-item label="附件" prop="attachments">
                <span v-for="(attachment, index) in fileList">
                  <p style="padding-left: 10px;"><a :href="attachment.url" target="_blank" style="text-decoration:underline;">{{ attachment.name }}</a></p>
                </span>
              </el-form-item>
            </div>
          </el-form>
        </el-card>

        <el-collapse v-model="activeNames">
          <el-collapse-item title="项目里程碑" name="1" style="margin-bottom: 18px;">
            <el-table
              :data="milestoneTableData"
              border
              style="margin:10px"
            >
              <el-table-column label="序号" width="70" align="center">
                <template #default="{ $index }">
                  {{ $index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="里程碑" prop="milestoneName" width="180" align="center">
              </el-table-column>
              <el-table-column label="任务" prop="milestoneTask" width="250" align="center">
              </el-table-column>
              <el-table-column label="计划完成时间" prop="milestoneDate" width="250" align="center">
              </el-table-column>
            </el-table>
          </el-collapse-item>

          <el-collapse-item title="项目组成员" name="2" style="margin-bottom: 18px;">
            <el-table
              :data="memberTableData"
              border
              style="margin:10px"
            >
              <el-table-column label="序号" width="70" align="center">
                <template #default="{ $index }">
                  {{ $index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="角色" prop="memberType" width="180" align="center">
              </el-table-column>
              <el-table-column label="项目组成员" prop="users" width="250" align="center">
              </el-table-column>
            </el-table>
          </el-collapse-item>

          <el-collapse-item title="关联需求" name="3"  style="margin-bottom: 18px;">
            <el-table
              ref="requirementTableRef"
              :data="requirementList"
              highlight-current-row
              border
            >
              <el-table-column label="需求编码" prop="code" min-width="150" />
              <el-table-column label="需求标题" prop="title" min-width="250" />
              <el-table-column label="创建人" prop="nickName" width="120" />
              <el-table-column label="创建时间" prop="createTime" width="180" />
              <el-table-column label="创建部门" prop="departmentName" width="150" />
              <el-table-column label="附件" prop="attachments" width="250">
                <template #default="{ row }">
                  <span v-for="(attachment, index) in handleAttachments(row.attachments)" :key="index">
                    <p><a :href="attachment.url" target="_blank" style="text-decoration:underline;">{{ attachment.name }}</a></p>
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>

        <el-card style="min-width: 480px;margin-bottom: 18px;" v-for="(examine, index) in examineList">
          <el-form
            label-width="100px"
            disabled="true"
          >
            <el-form-item label="审批意见" prop="examineStatus">
              <el-input :value="examine.examineStatus == 1 ? '通过' : '驳回'" />
            </el-form-item>

            <el-form-item label="意见明细" prop="content">
              <el-input :value="examine.content" />
            </el-form-item>

            <el-form-item label="审批人" prop="nickName">
              <el-input v-model="examine.nickName" />
            </el-form-item>

            <el-form-item label="审批时间" prop="createTime">
              <el-input v-model="examine.createTime" />
            </el-form-item>
          </el-form>
        </el-card>

        <el-card style="min-width: 480px">
          <template #header>
            <div class="card-header">
              <span>项目审批</span>
            </div>
          </template>

          <el-form
            ref="examineFormRef"
            :model="examineData"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item label="审批意见" prop="content">
              <el-input v-model="examineData.content" placeholder="请输入审批意见" />
            </el-form-item>
          </el-form>

          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="handleAgree">同 意</el-button>
              <el-button type="warning" @click="handleReject">驳 回</el-button>
            </div>
          </template>
        </el-card>

        <flowHistory :flowId="route.query.flowId" :workId="route.query.workId" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ProjectExamine",
  inheritAttrs: false,
});

import flowHistory from '../../work/backlog/components/flowHistory.vue';
import ProjectAPI, { ProjectData } from "@/api/project";
import ExamineAPI, { ExamineData, ExamineDataVO } from "@/api/examine";
import router from "@/router";
import WorkAPI from "@/api/work";

const route = useRoute();
const projectFormRef = ref(ElForm);
const examineFormRef = ref(ElForm);

// 项目表单
const projectData = reactive<ProjectData>({});
// 审批表单
const examineData = reactive<ExamineData>({});
const rules = reactive({
  content: [{ required: true, message: "请输入审批意见", trigger: "blur" },{ min: 1, max: 256, message: '输入长度在 1 到 256 个字符', trigger: 'blur' }],
});

const fileList = ref<UploadUserFile[]>([])

// 面板收缩
const activeNames = ref(['1', '2', '3']);
// 里程碑-列表数据
const milestoneTableData = ref([]);
// 项目组成员-列表数据
const memberTableData = ref([]);
// 关联需求
const requirementTableRef = ref();
const requirementList = ref([]);

const loading = ref(false);
/** 同意 */
const handleAgree = () => {
  examineFormRef.value.validate((valid: any) => {
    if (valid) {
      examineData.examineStatus = 1;
      examineData.workId = route.query.workId;
      examineData.processId = route.query.processId;
      loading.value = true;
      ProjectAPI.examine(examineData)
          .then((data) => {
            ElMessage.success(data.msg);
            ElMessage.success(data.data);
            router.push({ path: '/projectList/view' });
          })
          .finally(() => (loading.value = false));
    }
  });
}

/** 驳回 */
const handleReject = () => {
  examineFormRef.value.validate((valid: any) => {
    if (valid) {
      examineData.examineStatus = 0;
      examineData.workId = route.query.workId;
      examineData.processId = route.query.processId;
      loading.value = true;
      ProjectAPI.examine(examineData)
          .then((data) => {
            ElMessage.success(data.msg);
            ElMessage.success(data.data);
            router.push({ path: '/projectList/view' });
          })
          .finally(() => (loading.value = false));
    }
  });
}

const examineList = ref<ExamineDataVO[]>([])
onMounted(() => {
  if (route.query.workId){
    ProjectAPI.getByWorkId(route.query.workId).then(({data}) => {
      if (data){
        projectData.id = data.id;
        projectData.projectCode = data.projectCode;
        projectData.projectName = data.projectName;
        projectData.projectManager = data.projectManager;
        projectData.projectManagerName = data.projectManagerName;
        projectData.productManagerName = data.productManagerName;
        projectData.departmentId = data.departmentId;
        projectData.departmentName = data.departmentName;
        projectData.beginDate = data.beginDate;
        projectData.endDate = data.endDate;
        projectData.planEndDate = data.planEndDate;
        projectData.projectType = data.projectType;
        projectData.projectBackground = data.projectBackground;
        projectData.projectTarget = data.projectTarget;
        projectData.projectRisk = data.projectRisk;
        projectData.nickName = data.nickName;
        projectData.createTime = data.createTime;
        projectData.attachments = data.attachments;
        switch(data.projectType){
          case 1:
            projectData.projectTypeText = "N类全新项目";
          break;
          case 2:
            projectData.projectTypeText = "A类改进项目";
          break;
          case 3:
            projectData.projectTypeText = "B类改进项目";
          break;
          case 4:
            projectData.projectTypeText = "R类预研项目";
          break;
          default:
          break;
        }
        if (projectData.attachments){
          let files = JSON.parse(projectData.attachments);
          for(let i = 0; i < files.length; i++){
            fileList.value.push({name: files[i]["name"], url: files[i]["url"]});
          }
        }
        if (data.milestones){
          milestoneTableData.value = data.milestones;
        }
        if (data.members){
          for (let i = 0; i < data.members.length; i++){
            let member = data.members[i];
            let isExist = false;
            for (let j = 0; j < memberTableData.value.length; j++){
              let data = memberTableData.value[j];
              if (data.memberType == member.memberType){
                isExist = true;
                data.users += ",  " + member.nickName;
              }
            }
            if (!isExist){
              memberTableData.value.push({ "memberType": member.memberType, "users": member.nickName })
            }
          }
        }
        if (data.requirementList){
          requirementList.value = data.requirementList;
        }
      }
    })

    ExamineAPI.getByWorkId(route.query.workId).then(({data}) => {
      if (data){
        for(let i = 0; i < data.length; i++){
          let examine = reactive<ExamineDataVO>({ });
          examine.id = data[i].id;
          examine.examineStatus = data[i].examineStatus;
          examine.content = data[i].content;
          examine.nickName = data[i].nickName;
          examine.createTime = data[i].createTime;
          examineList.value.push(examine);
        }
      }
    })
  }
});

function handleAttachments(attachments){
  if (attachments){
    return JSON.parse(attachments);
  }
  else{
    return [];
  }
}
</script>

<style type="text/css">
  .form-flex {
    display: flex;
    gap: 10px; /* 间距 */
    margin-bottom: 18px;
  }
  .form-item {
    flex: 1; /* 使所有表单项平均分配空间 */
    margin: 0; /* 移除默认的 margin */
  }
  .el-collapse-item__header{
    padding-left: 10px;
    font-size: 14px;
    font-weight: bold;
  }
</style>
